import React, {useState} from 'react';
import Layout from '../components/Layout';
import Range from '../components/Range';
import {DayRange} from 'react-modern-calendar-datepicker';
import dayjs from 'dayjs';

type RangeList = 'day' | 'week' | 'month' | 'custom'

const Details = () => {

    let today = {
        day: dayjs().date(),
        month: dayjs().month() + 1,
        year: dayjs().year()
    }

    const [selectedRange, setSelectedRange] = useState<(RangeList)>('day')
    const [selectedDayRange, setSelectedDayRange] = useState<DayRange>({ from: null, to: null})

    const handleRangeChange = (event: (RangeList)) => {
        setSelectedRange(event)
    }

    const handleDayRangeChange = (event: (DayRange)) => {
        setSelectedDayRange(event)
    }

    return (
        <Layout>
            <Range
                selectedRange={selectedRange}
                onRangeChange={handleRangeChange}
                selectedDayRange={selectedDayRange}
                onDayRangeChange={handleDayRangeChange}
            />
        </Layout>
    );
}

export default Details